<template>
  <div v-el:food transition="move" class="food" v-show="showFlag">
    <div class="food-content">
      <div class="image-header">
        <img :src="food.image">
        <div @click="hidd" class="back">
          <span class=" icon-arrow_lift"></span>
        </div>
      </div>
      <div class="content">
        <div class="title">
          <h1>{{food.name}}</h1>
        </div>
        <div class="detail">
          <span class="sell-count">
            月售{{food.sellCount}}份
          </span>
          <span class="rating">
            好评率{{food.rating}}%
          </span>
        </div>
        <div class="price">
          <span class="now">¥{{food.price}}</span><span class="old" v-show="food.oldPrice">¥{{food.oldPrice}}</span>
        </div>
        <div class="cartcontrol-warpper">
          <cartcoutotrol :food="food"></cartcoutotrol>
        </div>
        <div transition="fade" @click.stop.prevent="addFrist" class="buy" v-show="!food.count || food.count===0">
          加入购物车
        </div>
      </div>
      <split v-show="food.info"></split>
      <div class="info" v-show="food.info">
        <h1 class="title">商品信息</h1>
        <p class="text">{{food.info}}</p>
      </div>
      <split v-show="food.info"></split>
      <div class="rating">
        <h1 class="title">商品评价</h1>
        <ratingselect :desc="desc" :ratings="food.ratings"
        :only-content="onlyContent" :select-type="selectType"></ratingselect>
        <div class="rating-wrapper">
          <ul v-show="food.ratings && food.ratings.length">
            <li v-show="needShow(rating.rateType,rating.text)" class="ratingItem" v-for="rating in food.ratings">
              <div class="user">
                <span class="name">{{rating.username}}</span>
                <img class="avatar" width="12" height="12" :src=rating.avatar>
              </div>
              <div class="time">
                {{rating.rateTime | formatDate}}
              </div>
              <p class="text">
              <span :class="{'icon-thumb_up':rating.rateType===0,
              'icon-thumb_down':rating.rateType===1}"></span>{{rating.text}}
              </p>
            </li>
          </ul>
          <div class="no-rating" v-show="!food.ratings || !food.ratings.length">
            暂无评价
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script type='text/ecmascript-6'>
  // 选择查看评价类型
  // 正向评价
  // const POSITIVE = 0;
  // // 负向评价
  // const NEGATIVE = 1;
  const ALL = 2;

  import BScroll from 'better-scroll';
  import cartcoutotrol from 'components/cartcoutotrol/cartcoutotrol';
  import split from 'components/split/split';
  import Vue from 'vue';
  import ratingselect from 'components/ratingselect/ratingselect';
  import {formatDate} from 'common/js/date';
  export default {
    props: {
      food: {
        type: Object
      }
    },
    data() {
      return {
        showFlag: false,
        // 用于关联ratingselect.vue
        // 默认全部评价
        selectType: ALL,
        // 默认选中 全部查看
        onlyContent: false,
        desc: {
          all: '全部',
          positive: '推荐',
          negative: '吐槽'
        }
      };
    },
    methods: {
      show() {
        this.showFlag = true;
        // 初始化
        this.selectType = ALL;
        this.onlyContent = false;
        // 初始化BScroll 页面显示的时候
        this.$nextTick(() => {
           if (!this.scrool) {
             this.scroll = new BScroll(this.$els.food, {
               click: true
             });
           } else {
             this.scroll.refresh();
           }
        });
      },
      hidd() {
        this.showFlag = false;
      },
      // 加入购物车
      addFrist(event) {
        // 解决PC端的重复点击问题
        if (!event._constructed) {
          return;
        }
        // 派发事件 cart.add  参数event.target
        this.$dispatch('cart.add', event.target);
        Vue.set(this.food, 'count', 1);
      },
      // 商品详情页 切换过滤
      needShow(type, text) {
        if (this.onlyContent && !text) {
          return false;
        }
        if (this.selectType === ALL) {
          return true;
        } else {
          return type === this.selectType;
        }
      }
    },
    // 改变子组件的状态  通知父组件说我的状态改变了，父组件也要做出相应的改变
    events: {
      'ratingtype.select'(type) {
        this.selectType = type;
        // 异步更新scroll
        this.$nextTick(() => {
          this.scroll.refresh();
        });
      },
      'content.toggle'(onlyContent) {
        this.onlyContent = onlyContent;
        this.$nextTick(() => {
          this.scroll.refresh();
        });
      }
    },
    // 时间搓的转化
    filters: {
      formatDate(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm');
      }
    },
    components: {
      cartcoutotrol,
      split,
      ratingselect
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/minxin.styl";
  .food
    position :fixed
    top:0
    left :0
    bottom :48px
    z-index :30
    width: 100%
    background :#ffffff
    &.move-transition
      transform :translate3d(0,0,0)
      transition :all 0.3s linear
    &.move-enter,&.move-leave
      transform :translate3d(100%,0,0)
    .image-header
      position :relative
      width: 100%
      height: 0
      padding-top :100%
      img
        position :absolute
        top:0
        left :0
        width: 100%
        height: 100%
      .back
        position :absolute
        top: 10px
        left :0
        .icon-arrow_lift
          display :block
          padding :10px
          font-size :20px
          color :#ffffff

    .content
      padding:18px
      position :relative
      .title
        line-height :14px
        margin-bottom :8px
        font-size :14px
        font-weight :700
        color :rgb(7,17,27)
      .detail
        font-size :10px
        color :rgb(147,153,159)
        line-height :10px
        margin-bottom :18px
        height :10px
        .sell-count
          margin-right :12px
      .price
        font-weight:700
        line-height :24px
        .now
          margin-right :8px
          font-size :14px
          color :rgb(240,20,20)
          font-weight :700
        .old
          text-decoration :line-through
          font-size :10px
          color :rgb(147,153,159)
    .cartcontrol-warpper
      position :absolute
      right :12px
      bottom :12px
    .buy
      position :absolute
      right :18px
      bottom :18px
      z-index :10
      line-height :24px
      height: 24px
      padding :0 12px
      box-sizing :border-box
      font-size :10px
      border-radius :12px
      color :#ffffff
      background :#00A0DC
      font-weight :700
      &.fade-transition
        opacity :1
        transition :all 0.2s
      &.fade-enter,&.fade-leave
        opacity :0
    .info
      .title
        padding :18px
        font-size :14px
      .text
        margin :0 26px 18px 26px
        font-size :12px
        line-height :24px
        color :#62696F
    .rating
      padding: 18px
      .title
        line-height :14px
        margin-left :6px
        font-size :14px
        color :rgb(7,17,27)
      .rating-wrapper
        /*padding :18px*/
        .ratingItem
          position :absolute
          padding :16px 0
          border-1px(rgba(7,17,27,0.1))
          .user
            position :absolute
            right :0
            top: 16px
            font-size :0
            line-height :12px
            .name
              display :inline-block
              vertical-align :top
              font-size :10px
              color :#9CA2A8
              margin-right :6px
            .avatar
              border-radius :50%
          .time
            line-height :12px
            font-size :12px
            color :#9CA2A8
          .text
            line-height :16px
            color :#010812
            font-size :12px
            .icon-thumb_up, .icon-thumb_down
              margin-right :4px
              font-size :12px
              line-height :24px
            .icon-thumb_up
              color :#00A0DC
            .icon-thumb_down
              color :#B7BBBF
        .no-rating
          font-size :12px
          padding :16px 0
          color: #9da0a4

</style>
